<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 旋转盒子 -->
    <script>
      // 队列
      var rotateTheBox = function (box) {
        let m = box.length
        let n = box[0].length
        // 对于每一行，都将石头向右移动，直到遇到障碍物或者边界，遍历每一行
        for (let i = 0; i < m; i++) {
          // 用队列记录空位的位置
          let queue = []
          // 对于每一行，从右向左遍历
          for (let j = n - 1; j >= 0; j--) {
            if (box[i][j] === '.') {
              // 遇到空位，加入队列
              queue.push(j)
            } else if (box[i][j] === '*') {
              // 遇到障碍物，清空队列
              queue = []
            } else {
              // 遇到石头，如果队列不为空，则石头下落，石头原来的位置变为空位加入队列
              if (queue.length > 0) {
                // 从队列中取出第一个空位，石头将落到这里
                let temp = queue.shift()
                box[i][temp] = '#'
                // 石头原来的位置变为空位，加入队列
                box[i][j] = '.'
                queue.push(j)
              }
            }
          }
        }
        // 将盒子竖过来，顺时针旋转90度
        let res = new Array(n).fill(null).map(() => new Array(m).fill(null))
        for (let i = 0; i < n; i++) {
          for (let j = 0; j < m; j++) {
            res[i][j] = box[m - 1 - j][i]
          }
        }
        return res
      }
      console.log(
        rotateTheBox([
          ['#', '.', '*', '.'],
          ['#', '#', '*', '.']
        ])
      )
    </script>
  </body>
</html>
